<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wangzm
 * @LastEditTime: 2020-03-04 15:13:29
 * @description: category page
 -->
<template>
  <base-page-view class-name="category-container">
    <base-nav :title="categoryTitle" left-icon="back" :refresh-flag="refreshFlag" other-height="150rpx">
      <view slot="other">
        <horizontalList ref="category-list" list-name="category" :list="categoryList" @itemClick="handleCategoryClick">
          <template v-slot="{item}">{{ item.name }}</template>
        </horizontalList>
        <sort-bar :sort.sync="goodsQuery" @change="handleSortChange" />
      </view>
    </base-nav>
    <view class="goods-list">
      <view v-for="(item, index) in goodsList" :key="index" class="goods-item-container">
        <goods-item class-name="goods-item" :goods-data="item" layout="vertical" image-width="100%" image-radius="0"></goods-item>
      </view>
      <base-list-state :list-length="listLength" :list-query="goodsQuery" :list-state="goodsState" :list-empty="listEmpty" />
    </view>
  </base-page-view>
</template>

<script>
import horizontalList from '@/components/horizontalList/index'
import sortBar from '@/components/sortBar/index'
import goodsItem from '@/components/goodsItem/index.vue'
import { debounce } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    horizontalList,
    sortBar,
    goodsItem
  },
  data() {
    return {
      option: {
        parent: '',
        id: ''
      },
      parentCategoryId: '', // 父级分类id
      categoryTitle: '',
      categoryList: [],
      refreshFlag: false,
      goodsQuery: {
        category_id: '',
        all: 1,
        sale: null,
        news: null,
        price: null,
        page_no: 1,
        page_size: 20
      },
      goodsList: [],
      goodsState: {
        loading: false,
        more: true
      },
      listEmpty: {
        type: 'empty_network',
        text: '暂无数据哦~~'
      }
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.goodsList.length
    }
  },
  created() {
  },
  onLoad(option) {
    this.parentCategoryId = option.parent
    this.goodsQuery = {
      category_id: option.id || option.parent,
      all: 1,
      news: null,
      sale: null,
      price: null,
      page_no: 1,
      page_size: 20
    }
    this.fetchData()
  },
  onPullDownRefresh() {
    this.goodsQuery.page_no = 1
    this.fetchData(true)
  },
  onReachBottom: debounce(function() {
    if (this.goodsState.more && !this.goodsState.loading) {
      this.goodsQuery.page_no++
      this.fetchCategoryGoodsData()
    }
  }, 500),
  methods: {
    fetchData(flag) {
      this.fetchCategoryData()
      this.fetchCategoryGoodsData(flag)
    },
    // 获取分类列表
    async fetchCategoryData() {
      const res = await this.$api.excellentApi.getCategorySecond({
        parentId: 0
      })

      if (res.success && res.data) {
        const categoryArray = res.data.filter(i => i.id === parseInt(this.parentCategoryId))
        if (categoryArray && categoryArray.length) {
          this.categoryTitle = categoryArray[0].name
          const category = [{ id: this.parentCategoryId, name: '全部' }].concat(categoryArray[0].categories)
          const index = category.findIndex(i => i.id === parseInt(this.goodsQuery.category_id))
          if (index > -1) {
            category[index].checked = true
          }
          this.categoryList = [].concat(category)
          this.$setNavTitle(categoryArray[0].name)
        }
      }
    },
    // 获取分类商品
    async fetchCategoryGoodsData(flag) {
      this.refreshFlag = !!flag
      this.goodsState.loading = true
      const res = await this.$api.excellentApi.getCategorySort({
        ...this.goodsQuery,
        news: this.goodsQuery.all || this.goodsQuery.news
      })
      if (this.goodsQuery.page_no === 1) {
        this.goodsList = []
      }
      if (res.success && res.data) {
        this.goodsList = this.goodsList.concat(res.data || [])
        this.goodsState.more = !(res.data.length < this.goodsQuery.page_size)
      }

      setTimeout(() => {
        this.goodsState.loading = false
        this.refreshFlag = false
        uni.stopPullDownRefresh()
      }, 500)
    },
    handleCategoryClick(index) {
      this.goodsQuery = {
        ...this.goodsQuery,
        category_id: this.categoryList[index].id,
        page_no: 1
      }
      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0
      })
      this.fetchCategoryGoodsData()
    },
    handleSortChange(sort) {
      this.goodsQuery = {
        ...this.goodsQuery,
        ...sort,
        page_no: 1
      }
      this.fetchCategoryGoodsData()
    }
  }
}
</script>
